<template>
	<!-- 分销码界面 -->
	<view class="DistributionYards">
		<view class="img_center" style="">
			<!-- height: 466rpx; -->
			<view class="" style="position: relative;">
				<view class="img_center_top" style="width: 100%;height: 466rpx;position: relative; ">
					<view class="" style="position: absolute;width: 100%;">
						<!-- //110 -->
						<view class="d-flex-yCenter-ju" style="padding: 90rpx  0rpx 32rpx; ">
							{{uname}}
						</view>
						<view class="d-flex-yCenter-ju">
							<image :src="imgurl" mode="" :show-menu-by-longpress="true"
								style="width: 334rpx;height: 334rpx;margin-top: -14px;">
							</image>
						</view>
					</view>
				</view>
				<view class="img_center_bottom" style="height: 288rpx;position: relative;margin-top: -4rpx; ">

					<view class="" style="position: absolute;width: 100%;">
						<view class="d-flex-yCenter-ju" style="margin: 140rpx 0rpx 32rpx;color: #999999; ">
							长按二维码/扫一扫，快速申请加入
						</view>

					</view>
				</view>
			</view>
		</view>
		<view class="d-flex-yCenter-ju" style="margin-top: 122rpx;">
			<view class="" style="margin-right: 124rpx;">
				<button type="default" open-type="share">
					<view class="d-flex-yCenter-ju">
						<image src="../../static/icon/wechart.png" style="width: 52rpx;height: 42rpx;" mode=""></image>
					</view>
					<view class="d-flex-yCenter-ju" style="color: #FFFFFF;font-size: 12px;margin-top: 20rpx;">
						分享至微信
					</view>

				</button>
			</view>
			<!-- @click="download" -->
			<view class="" @tap='$tool.xiazai(imgurl)'>
				<view class="d-flex-yCenter-ju">
					<image src="../../static/icon/erweima_slices.png" style="width: 52rpx;height: 42rpx;" mode="">
					</image>
				</view>
				<view class="d-flex-yCenter-ju" style="color: #FFFFFF;font-size: 12px;margin-top: 20rpx;">
					保存二维码
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	import {
		code
	} from '@/config/apiRouter.js'
	// import {
	// 	xiazai
	// } from '@/config/tool.js'
	export default {
		data() {
			return {
				imgurl: '' //分销二维码
			}
		},
		computed:{
			...mapGetters(['uname'])
		},
		onLoad() {
			code().then(res => {
				this.imgurl = res.data;
				console.log(res, '参数二维码异常')
			})
		},
		methods: {
			// 保存分销码
			download() {
				xiazai(this.imgurl)
			}
		}
	}
</script>

<style lang="scss">
	.DistributionYards {
		overflow: hidden;
		box-sizing: border-box;
		height: 100vh;
		background-color: #FF890B;

		.img_center {
			position: relative;
			margin: 90rpx 44rpx 0rpx;
			// border: 1px solid red;

			.img_center_top {
				overflow: hidden;
				background: url(../../static/icon/tuceng_ff_top.png);
				background-size: 100%;

				.wex_img {
					width: 334rpx;
					height: 334rpx;
					background-color: #000000;
				}
			}

			.img_center_bottom {
				overflow: hidden;
				background: url(../../static/icon/tuceng_ff_bottom.png);
				background-size: 100%;
			}

		}

		button {
			margin: 0;
			padding: 0;
			outline: none;
			border-radius: 0;
			background-color: transparent;
			line-height: inherit;
			width: max-content;
		}

		button:after {
			border: none;
		}

		// image {
		// 	width: 100%;
		// 	height: 100%
		// }

	}
</style>
